<!DOCTYPE html>
<html xmls:v-bind="http://www.w3.org/1999/xhtml">
	<head>
		<title>孙煜琳-Vue登录</title>

		<meta name="keywords" content="孙煜琳-Vue登录"/>
		<meta name="description" content="孙煜琳-Vue登录"/>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<link rel="icon" href="./images/AI_black.png" type="image/x-icon" />
		<link href="css/style.css"  rel='stylesheet' type='text/css'/>


		<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
		<script src="js/jquery.min.js" ></script>
		<script src="js/skycons.js" ></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"
		type="text/javascript"></script>

		<!-- <style scoped>
			.canvas {
				height: 38px;
			}
			.canvas canvas{
				margin-top: 1px;
				margin-left: 8px;
			}
		</style> -->
	</head>
	<body>
		<h1 style="font-weight: bold;">疫情统计系统登录界面</h1>
		<div id="loginDiv" class="main-agileits">
			<div class="sign-in-wthree">
				<div class="sign-in-top-agileinfo">
					<h2>Sign In</h2>
					<p>Your info is safe here</p>
					<p>11923040212-孙煜琳</p>
				</div>
				<div class="sign-in-bottom-agileinfo">
					<form action="javascript:void(0);" method="post">
						<h3>User Name</h3>
						<p><input type="text" v-model="user.userName" required="required"/>

						<h3>Password</h3>
						<input type="password" v-model="user.password" required=""/>

						<h3>Verification Code</h3>
						<div>
							<input
								class="input-val"
								type="text"
								v-model="inputNum" 
								placeholder="请输入验证码（不区分大小写）"
								style="float: left; width: 50%; margin-bottom: 0px"
							/>
							<!-- 事件绑定 -->
							<canvas id="canvas" @click="draw()" width="95" height="36"></canvas>
						</div>

						<!-- Sign In -->
						<input type="submit" @click="login()" value="Sign In"/>
						<p>Forgot Password? </p>
						<a href="http://www.sfac.xyz/api/login">Click Here</a>
					</form>
				</div>
			</div>
		</div>
		<div class="footer-agileits-w3layouts">
			<p class="agileinfo">
				&copy; 2022 6月20号 . Vue登录 | Design by &hearts;11923040212-孙煜琳
				<a href="http://www.sfac.xyz/api/login" target="_blank">跳转网址</a>
			</p>
		</div>

		<script>
			var loginVue = new Vue({
				el:"#loginDiv",
				data: {
					user:{
						userName:"",
						password:"",
					},
					showNum:[], //动态验证码数组
					inputNum:"",//字符串
				},
			
				methods:{
					login:function(){
						if (this.user.userName == "" || this.user.password == ""){
							alert("请输入用户名和密码。");
							return;
						}

						var showNumStr = this.showNum.join("");
						if(this.inputNum ==''){
							alert("请输入验证码！");
							return;
						}else if(this.inputNum != showNumStr){
							alert("验证码错误！请重新输入！");
							return;
						};

						var self = this;
						$.ajax({
							url: "http://www.sfac.xyz/api/login",
							type: "post",
							contentType: "application/json",
							data: JSON.stringify(self.user),
							success:function(rs){
								if(rs.status == 200){
									alert(rs.message);
									location.href = "./疫情大数据/Epidemic_Data.html";
								}else{
									alert(rs.message);
								}
							},
							error: function(rs){
								console.log(rs);
							}
						});

						

					},
					
					

					// 动态验证码
					draw:function(){
						var canvas_width=$('#canvas').width();
						var canvas_height=$('#canvas').height();
						var canvas = document.getElementById("canvas");//获取到canvas的对象
						var context = canvas.getContext("2d");//获取到canvas画图的环境
						canvas.width = canvas_width;
						canvas.height = canvas_height;
						var sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
						var aCode = sCode.split(",");
						var aLength = aCode.length;//获取到数组的长度

						for (var i = 0; i <= 3; i++) {
							var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
							var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
							var txt = aCode[j];//得到随机的一个内容
							this.showNum[i] = txt.toLowerCase();
							var x = 10 + i * 20;//文字在canvas上的x坐标
							var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
							context.font = "bold 23px 微软雅黑";

							context.translate(x, y);
							context.rotate(deg);

							context.fillStyle = this.randomColor();
							context.fillText(txt, 0, 0);

							context.rotate(-deg);
							context.translate(-x, -y);
						}

						for (var i = 0; i <= 5; i++) { //验证码上显示线条
							context.strokeStyle = this.randomColor();
							context.beginPath();
							context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
							context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
							context.stroke();
						}
						for (var i = 0; i <= 30; i++) { //验证码上显示小点
							context.strokeStyle = this.randomColor();
							context.beginPath();
							var x = Math.random() * canvas_width;
							var y = Math.random() * canvas_height;
							context.moveTo(x, y);
							context.lineTo(x + 1, y + 1);
							context.stroke();
						}
					},
					
					randomColor: function(){
						//得到随机的颜色值
						var r = Math.floor(Math.random() * 256);
						var g = Math.floor(Math.random() * 256);
						var b = Math.floor(Math.random() * 256);
						return "rgb(" + r + "," + g + "," + b + ")";
					}
				},
				mounted() {
					this.draw();
				}
			});
		</script>
	</body>
</html>